<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <input type="text" name="project_budget_id" value="{$model.id ?? ''}" lay-verify="required"
           placeholder="请输入项目名称" autocomplete="off"
           class="layui-input">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$model.pb.name ?? ''}" lay-verify="required"
                           placeholder="请输入项目名称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目主管</label>
                <div class="layui-input-block">
                    <input type="text" name="executive" id="executive" value="{$model.pb.executive ?? ''}"
                           lay-verify="required" placeholder="请输入项目主管" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">执行区域</label>
                <div class="layui-input-block">
                    <input type="text" name="execution_area" id="execution_area" lay-verify="required"
                           value="{$model.pb.execution_area ?? ''}"
                           placeholder="请输入执行区域"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="start_time" id="start_time" value="{$model.pb.start_time ?? ''}"
                           lay-verify="required" placeholder="请输入开始时间"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="end_time" id="end_time" value="{$model.pb.end_time ?? ''}"
                           placeholder="请输入结束时间"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">样本总量</label>
                <div class="layui-input-block">
                    <input type="text" name="sample_num" id="sample_num" value="{$model.pb.sample_num ?? ''}"
                           placeholder="请输入样本总量"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

    </div>
    <!--项目类型 -->
    <div class="layui-row" id="project_sample">
        {foreach $model.pb.ProjectBudgetTypeConfig as $key=>$vo}
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目类型</label>
                <div class="layui-input-block">
                    <input type="text" value="{$vo.type_name ?? ''}" name="type_name[]" lay-verify="required"
                           placeholder="请输入项目类型" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">主样本量</label>
                <div class="layui-input-block">
                    <input type="text" value="{$vo.main_sample_num ?? ''}" name="main_sample_num[]"
                           lay-verify="required" id="main_sample_num" required placeholder="请输入主样本量"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label">放大样本量</label>
                <div class="layui-input-block">
                    <input type="text" value="{$vo.enlarge_sample_num ?? ''}" name="enlarge_sample_num[]"
                           lay-verify="required" id="enlarge_sample_num" required
                           placeholder="请输入放大样本量" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md1">
            <a class="layui-btn" name="del" data-id="{$vo.id ?? ''}" data-type="type"
               style="height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;">删除</a>
        </div>
        {/foreach}
    </div>
    <div class="layui-row">
        <table class="layui-table">
            <thead>
            <tr>
                <th style="text-align: center;">计划成本</th>
                <th style="text-align: center;">数量</th>
                <th style="text-align: center;">单价</th>
                <th style="text-align: center;">金额(元)</th>
                <th style="text-align: center;">备注</th>
                <th style="text-align: center;"></th>
            </tr>
            </thead>
            <tbody id="index-table">
            <div style="display: none;"><select lay-search="" id="select">
                <option value="">直接选择或搜索选择</option>
                {foreach $plan as $key=>$vo}
                <option value="{$vo.id}">{$vo.name}</option>
                {/foreach}
            </select></div>

            {foreach $model.pb.ProjectBudgetPlanConfig as $key=>$vo}
            <tr>
                <td>
                    <select name="cost_id[]" lay-search="" lay-verify="required">
                        <option value="">直接选择或搜索选择</option>
                        {foreach $plan as $key=>$vos}
                        <option value="{$vos.id}" {if condition="$vo.ProjectPlan['id'] eq $vos.id" }selected{/if}>{$vos.name}</option>
                        {/foreach}
                    </select>
                </td>
                <td style="text-align: center;">
                    <input type="number " lay-verify="number" name="num[]" value="{$vo.num ?? ''}" lay-verify="required"
                           placeholder="1,2,3,4"
                           autocomplete="off"
                           class="layui-input input num">
                </td>
                <td style="text-align: center;">
                    <input type="number" name="unit_price[]" value="{$vo.unit_price ?? ''}" placeholder="￥"
                           lay-verify="required" autocomplete="off"
                           class="layui-input input price">
                </td>
                <td style="text-align: center;">
                    <input type="number" placeholder="￥" id="final" autocomplete="off" value="{$vo.sum_of_money ?? ''}"
                           name="sum_of_money[]"
                           class="layui-input final" disabled>
                </td>
                <td style="text-align: center;"><input type="text" name="remark[]" value="{$vo.remark ?? ''}"
                                                       placeholder="请输入备注" autocomplete="off"
                                                       class="layui-input"></td>
                <td><a name="del" data-id="{$vo.id ?? ''}" data-type="plan"><i class="iconfont icon-shanchu1"
                                                                               style="cursor:pointer;"></i></a></td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var deleteUrl = "{:url('project/del_config')}"
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'form', 'laydate'], function () {
        var $ = layui.jquery, form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#start_time'

            , trigger: 'click'//呼出事件改成click
        });

        laydate.render({
            elem: '#end_time'

            , trigger: 'click'//呼出事件改成click
        });
        form.render();
        //样本类型处理

        var sample_html = "";
        sample_html += "  <div class=\"layui-row\">";
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">项目类型</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"type_name[]\" required placeholder=\"请输入项目类型\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">主样本量</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"main_sample_num[]\" required placeholder=\"请输入主样本量\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md3\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">放大样本量</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"enlarge_sample_num[]\" required placeholder=\"请输入放大样本量\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md1\">";
        sample_html += " <button class=\"layui-btn add_sample\"\n" +
            "                    style=\"height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;\">\n" +
            "                新增\n" +
            "            </button>";
        sample_html += "</div>";
        sample_html += "</div>";
        $('#project_sample').append(sample_html);
        //点击按钮新增
        $("body").on('click', '.add_sample', function () {
            var $content = "";
            $content += ' <button class="layui-btn del-sample" style="height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;">删除</button>';
            $(this).parent().append($content);
            //去除加号
            this.remove();

            var sample_html = "";
            sample_html += "  <div class=\"layui-row\">";
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">项目类型</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"type_name[]\" required placeholder=\"请输入项目类型\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">主样本量</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"main_sample_num[]\" required placeholder=\"请输入主样本量\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md3\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">放大样本量</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"enlarge_sample_num[]\" required placeholder=\"请输入放大样本量\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md1\">";
            sample_html += " <button class=\"layui-btn add_sample\"\n" +
                "                    style=\"height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;\">\n" +
                "                新增\n" +
                "            </button>";
            sample_html += "</div>";
            sample_html += "</div>";
            $('#project_sample').append(sample_html);

            /**
             * 删除事件
             */
            $("body").on('click', '.del-sample', function () {
                //获取当前点击的元素的父级的父级进行删除
                $(this).parent().parent().remove();
            })
        });
        var select = $("#select").html();

        //表格处理
        var html = "";
        html += "<tr>";
        html += "<td><select name=\"cost_id[]\" lay-search=\"\">"
        html += select
        html += "</select>";
        html += "</td>";
        html += "<td> <input type=\"number \"  name=\"num[]\" placeholder=\"1,2,3,4\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input input num\">";
        html += "</td>"
        html += "<td> <input type=\"number \" l name=\"unit_price[]\" placeholder=\"￥\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input input price\">";
        html += "</td>"
        html += "<td style='text-align: center;'> <input type=\"number \"  name='sum_of_money[]'  placeholder=\"￥\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input final\" disabled>";
        html += "</td>"
        html += "<td><input type=\"text\" name=\"remark[]\"\n" +
            "placeholder=\"请输入备注\" autocomplete=\"off\"\n" +
            "class=\"layui-input\">";
        html += "</td>"
        html += "<td><i class=\"iconfont icon-xinzeng addInputReturn\" id=\"addTable\" style=\"cursor:pointer;\"></i>"
        html += "</td>"
        html += "</tr>"
        $("#index-table").append(html);
        $("body").on('click', '.addInputReturn', function () {
            var $content = "";
            $content += '<a href="javascript:;" class="delInput" >';
            $content += '<i class="layui-icon">&#x1006;</i>';
            $content += '</a>';
            $(this).parent().append($content);
            //去除加号
            this.remove();

            var html = "";
            html += "<tr>";
            html += "<td><select name=\"cost_id[]\" lay-search=\"\">"
            html += select
            html += "</select>";
            html += "</td>";
            html += "<td> <input type=\"number \" name=\"num[]\" placeholder=\"1,2,3,4\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input input num\">";
            html += "</td>"
            html += "<td> <input type=\"number \"  name=\"unit_price[]\" placeholder=\"￥\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input input price\">";
            html += "</td>"
            html += "<td style='text-align: center;'> <input type=\"number \" name='sum_of_money[]' placeholder=\"￥\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input final\" disabled>";
            html += "</td>"
            html += "<td><input type=\"text\" name=\"remark[]\"\n" +
                "placeholder=\"请输入备注\" autocomplete=\"off\"\n" +
                "class=\"layui-input\">";
            html += "</td>"
            html += "<td><i class=\"iconfont icon-xinzeng addInputReturn\" id=\"addTable\" style=\"cursor:pointer;\"></i>"
            html += "</td>"
            html += "</tr>"
            $("#index-table").append(html);
            form.render();

            /**
             * 删除事件
             */
            $("body").on('click', '.delInput', function () {
                //获取当前点击的元素的父级的父级进行删除
                $(this).parent().parent().remove();
            })
        });
        form.render();
        input_enterKeydown(); //初始化
        //文本框焦点
        $('body').on('blur', '.input', function () {
            var value = $(this).val();
            if (value != null && value != '') {
                if (!validateInput(value)) {
                    $(this).val("");
                    return false;
                } else {
                    var num = $(this).parents("tr").find("input.num").val();
                    console.log(num);
                    var price = $(this).parents("tr").find("input.price").val();
                    console.log(price);
                    var final = num * price;
                    $(this).parents("tr").find("input.final").val(final);

                }
            }
        });
        //验证规则
        function validateInput(value) {
            var regex = /^(\d{1,10}|1000000)$/;
            if (!regex.test(value)) {
                layer.msg("请填写0~100000的数字，包含0和100000", {icon: 2});
                return false;
            }
            return true;
        }
        // enter回车时，跳转到下一个input元素
        function input_enterKeydown() {
            var $input = $('input:text:not(:disabled)');
            $input.bind("keydown", function (e) {
                var n = $input.length;
                if (e.which == 13) {
                    e.preventDefault(); //Skip default behavior of the enter key
                    var nextIndex = $input.index(this) + 1;
                    if (nextIndex < n)
                        $input[nextIndex].focus();
                    else
                        $input[nextIndex - 1].blur();
                }
            });
        }
        //删除按钮
        $(document).on("click", "a[name='del']", function (event) {
            var id = $(this).data('id'); //id
            var type = $(this).data('type');
            if (type === "type"){
                $confirm = "确定删除项目类型吗?";
            }else if (type === "plan"){
                $confirm = "确定删除计划成本吗?";
            }
            param = $.param({'id': id, 'type': type});
            layer.confirm($confirm, function (t) {
                $.ajax({
                    url: deleteUrl + '?' + param, success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                                location.reload();
                                layer.closeAll();
                            });
                        } else {
                            layer.msg(res.message, {icon: 5});
                            return false;
                        }
                    }
                });
            });
        });


    });
</script>
